;(function($){
    //取消所有a的默认事件
    $(".selector-wrapper a").on("click", function(evt){
        let e = evt || window.event;
        e.preventDefault();
        e.stopPropagation();
    })

    //点击更多城市时，显示或隐藏二级菜单
    $("#moreCity").on("click", ()=>{
        //如果原来是隐藏的，就显示
        if($(".more-city-wrapper").css("display") === "none"){
            $(".more-city-wrapper").css({
                "display" : "block"
            });
            $("#moreCity i").attr("class", "fa fa-angle-up");
        }else{
            //如果原来是显示的，就隐藏
            $(".more-city-wrapper").css({
                "display" : "none"
            });
            $("#moreCity i").attr("class", "fa fa-angle-down");
        } 
    })

    //点击空白处时，隐藏二级菜单
    $(document).on("click", ()=>{
        $(".more-city-wrapper, .more-type-wrapper").css({
            "display" : "none"
        });
        $("#moreCity i").attr("class", "fa fa-angle-down");
        $("#moreType i").attr("class", "fa fa-angle-down");
    })

    //点击更多类型时，显示或隐藏二级菜单
    $("#moreType").on("click", ()=>{
        if($(".more-type-wrapper").css("display") === "none"){
            $(".more-type-wrapper").css({
                "display" : "block"
            });
            $("#moreType i").attr("class", "fa fa-angle-up");
        }else{
            $(".more-type-wrapper").css({
                "display" : "none"
            });
            $("#moreType i").attr("class", "fa fa-angle-down");
        } 
    })

    //给导航栏上显示的a添加事件
    $(".city-item a, .type-item a, .selector-item a").on("click", function(){
        //点击任意a，出现吸顶效果
        $("html").animate({
            scrollTop : 280
        }, 1000)

        //改变a的样式
        //如果是city-item中的a，就改变city-item中其他a的颜色，另外两行颜色不变
        if($(this).parent().attr("class").indexOf("city-item") != -1){
            $(".selector-wrapper .city-item a").css({
                color: "#99a2aa"
            })
            //当点击city-item中的a时，显示“更多城市”，隐藏更多城市中的名字
            $("#moreCity .moreCity").css({
                display : "block"
            })
            //将更多城市的小箭头改变为向下
            $("#moreCity i").attr("class", "fa fa-angle-down");
            $("#moreCity .moreCityName").css({
                display : "none"
            })
        }else if($(this).parent().attr("class").indexOf("type-item") != -1){
            $(".selector-wrapper .type-item a").css({
                color: "#99a2aa"
            })
            //当点击type-item中的a时，显示“更多城市”，隐藏更多城市中的名字
            $("#moreType .moreType").css({
                display : "block"
            })
            //将更多城市的小箭头改变为向下
            $("#moreType i").attr("class", "fa fa-angle-down");
            $("#moreType .moreTypeName").css({
                display : "none"
            })
        }else{
            $(".selector-wrapper .selector-item a").css({
                color: "#99a2aa"
            })
        }
        //将当前点击的元素的颜色改变为红色
        $(this).css({
            color : "#f25d8e"
        })
        
    })

    //给“字母”的a添加点击事件
    $(".more-city-wrapper .more-city-letter-list a").on("click", function(){
        //遍历所有的城市的ul，跟当前点击的字母列表的data-n对比，显示对应的城市ul
        $(".more-city-wrapper .more-city-list ul").each((key, value)=>{
            if(key+1 == $(this).parent().attr("data-n")){
                $(".more-city-wrapper .more-city-list ul").css({
                    display : "none" 
                })
                value.style.display = "block";
            }
        })
        $(".more-city-wrapper .more-city-letter-list a").parent().removeClass("active");
        $(this).parent().addClass("active");
    })

    //点击城市列表的a时，隐藏“更多城市”，显示“对应城市名字”
    $(".more-city-list a").on("click", function(){
        console.log($(this));
        $("#moreCity .moreCity").css({
            display : "none"
        })
        $("#moreCity .moreCityName").css({
            display : "block"
        })
        $("#moreCity .moreCityName").html(`${$(this).html()}`);
        $(".more-city-wrapper").css({
            "display" : "none"
        });
        $(".selector-wrapper .city-item a").css({
            color: "#99a2aa"
        })
    })

    $(".more-type-list a").on("click", function(){
        console.log($(this));
        $("#moreType .moreType").css({
            display : "none"
        })
        $("#moreType .moreTypeName").css({
            display : "block"
        })
        $("#moreType .moreTypeName").html(`${$(this).html()}`);
        $(".more-type-wrapper").css({
            "display" : "none"
        });
        $(".selector-wrapper .type-item a").css({
            color: "#99a2aa"
        })
    })
    
    
})(jQuery)